import React, { Component } from 'react';
import { Provider } from 'react-redux';
// import AppTest from './AppTest';
import App from './containers/app.jsx';
import ServerManagementContainer from './containers/server-management.jsx';
import QueryBrowserContainer from './containers/query-browser.jsx';
// import {Redirect,Router, Route,Switch,Link} from 'react-router-dom'
import {HashRouter as Router,BrowserRouter,Routes, Route,Link} from 'react-router-dom'
import configureStore from './store/configure';
// let createHashHistory=require("history").createHashHistory;
import {injectGlobal} from '@emotion/css';
injectGlobal`
body{
  margin: 0px;
  padding: 0;
  border: 0;
  background: #c0c0c0; }`
// import createBrowserHistory from "history"
// const history = createHashHistory({
//   hashType: "slash" // the default
// })
const store = configureStore();
class NoMatch extends Component{
  render=()=>{
    console.log(this.props);
    return(<div>
                <Link to="/manage" >manage</Link>
              </div>);
  }
}
class NoID extends Component{
  render=()=>{
    console.log(this.props.history.location.pathname);
    return(<div>
      NoID
                <Link to="/manage" >manage</Link>
              </div>);
  }
}

class Routers extends Component{
  render=()=>{
    return(<Routes>
                <Route path="/manage" element={<ServerManagementContainer />} />
                <Route path="/server/:id" element={<QueryBrowserContainer />} />
                <Route path="/" element={<ServerManagementContainer />}/>
              </Routes>);
  }
}
export default class Root extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router >
           <App>
            <Routers />
           </App>
        </Router>
      </Provider>
    );
  }
}

